<template>
  <div>
    <div class="navbar row-center all-center">
      <IconFullScreen class="left" @click="fullscreen" />
      <IconLogo class="logo" />
      <IconOut class="right" size="26" name="icon_out_game" @click="outPage" />
    </div>
    <div class="game-warp">
      <!-- <svg
        v-if="PlatformUtil.isH5Ios && navHeight == 0"
        class="exit-right"
        :style="{
          bottom: iosH5SafariToolHeight + 10 + 'px',
        }"
        @click="exitFullscreen()"
      >
        <use xlink:href="/static/icon.svg#icon_FullScreen"></use>
      </svg> -->
      <iframe
        v-if="url"
        id="iframe"
        :src="url"
        class="iframe-box"
        frameborder="0"
        :style="{
          height: iframeHeight - navHeight + 'px',
          marginTop: `${navHeight}px`,
        }"
        :allowfullscreen="true"
        :webkitallowfullscreen="true"
        :mozallowfullscreen="true"
      ></iframe>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onBeforeUnmount } from 'vue'
import ScreenFull from 'screenfull'
import { GAME_TYPE } from '@/types/game.types.ts'
import { useGameStore } from '@/store/game'
import gameApi from '@/api/game'
import { isURL, isIos } from '@/utils/'
import type { PlayPageQuery } from '@/types/game.types'
import IconFullScreen from '@/assets/svgs/game/icon_full_screen.svg'
import IconOut from '@/assets/svgs/game/icon_out_game.svg'
import IconLogo from '@/assets/svgs/game/icon_logo.svg'
const route = useRoute()
const gameStore = useGameStore()
definePageMeta({
  layout: false,
  ssr: false,
})

const pageQuery: PlayPageQuery = {
  id: route.query.id as string,
  type: route.query.type as GAME_TYPE,
  from: route.query?.from as string,
}

const iosH5SafariToolHeight = 0 // 30 + 45 这是苹果浏览器工具栏和导航栏
const iframeHeight = ref(0)
const navHeight = ref(58)

const url = ref('')

const fullscreen = () => {
  const el = document.getElementById('iframe')
  if (ScreenFull.isEnabled) {
    ScreenFull.request(el)
  } else {
    navHeight.value = 0

    // hint("浏览器不支持全屏功能");
  }
}
const login = async () => {
  if (!pageQuery.id) return
  const res = await gameApi.login({ game_id: Number(pageQuery.id) })
  if (isURL(res.data?.url)) {
    url.value = res.data.url
  } else {
    await window.localStorage.setItem('_game_doc_text_', res.data.url)
    url.value = '/game.html'
  }
}

const outPage = () => {
  navigateTo(pageQuery.from || '/', { replace: true })
}

const outGame = () => {
  const needGameOut = gameStore.list.find((game: any) => game.type === pageQuery.type)
  if (pageQuery.id && url.value && needGameOut) {
    gameApi.gameOut({ game_id: Number(pageQuery.id) })
  }
}

const addRefreshTag = () => {
  // window.localStorage.setItem(CATCH_KEYS.markRefresh, url.value)
}

onBeforeUnmount(() => {
  outGame()
})
login()
onMounted(() => {
  iframeHeight.value = document?.documentElement?.clientHeight
  if (isIos()) iframeHeight.value = iframeHeight.value - iosH5SafariToolHeight
})

addRefreshTag()
</script>

<style scoped lang="scss">
.navbar {
  position: fixed;
  width: 100%;
  height: 112px;
  top: 0;
  left: 0;
  background: #ffffff;
  .left {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    color: #798d9f;
  }

  .logo {
    width: 200px;
    color: #3066ff;
    flex-shrink: 0;
    width: 222px;
    height: 56px;
  }

  .right {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    color: #798d9f;
  }
}
.game-warp {
  height: calc(100vh - 55px);
  width: 100%;

  .iframe-box {
    width: 100%;
    height: 100%;
  }
}
</style>
